<template>
  <div>
    <el-form class="form">
      <el-form-item label="题目类型">
        <el-select
            @change="changeType"
            v-model="question.type"
            clearable
            placeholder="请选择题目类型"
        >
          <el-option v-for="(item,index) in typeArr"
                     :label="item.label"
                     :value="item.value"
                     :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目问题">
        <el-input
            type="textarea"
            resize="none"
            :autosize="{minRows: 5}"
            v-model="question.title"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="题目难度">
        <el-input-number v-model="question.difficulty" :precision="1" :step="0.5" step-strictly :min="0" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item>
        <div v-if="this.question.type===2">
          <!--          选择题选项部分-->
          <div>选项</div>
          <div v-for="(item,index) in assist_choice_selections" :key="item.id">
            <el-row :gutter="10" justify="space-around">
              <el-col :span="1"></el-col>
              <el-col :span="1">
                  <el-checkbox v-model="item.correctness" ></el-checkbox>
              </el-col>
              <el-col :span="5">
                <div>{{"选项"}}{{index+1}}</div>
              </el-col>
              <el-col :span="8">
                <el-input v-model="item.selection"></el-input>
              </el-col>
              <el-col :span="2">
                <el-button circle class="el-icon-circle-plus-outline" type="primary" size="mini" @click="addSelection(index)"></el-button>
              </el-col>
              <el-col :span="2" >
                <el-button circle class="el-icon-remove-outline" type="danger" size="mini" @click="deleteSelection(index)"></el-button>
              </el-col>
            </el-row>


          </div>
          <div v-if="assist_choice_selections.length===0">
            <el-row :gutter="1">

              <el-col :span="2">
                <el-button @click="addSelection(-1)">增加选项</el-button>
              </el-col>
            </el-row>
          </div>
          <!--          选择题分数部分-->
        <el-row :gutter="10">
          <el-col :span="8" :offset="6">
            <el-input-number v-model="assist_choice_score[0]" :precision="1" :step="0.5" step-strictly :min="0"></el-input-number>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="8" :offset="6">
            <div>{{ "题目答案 : " +'['+choice_body_answers+']'}}</div>
          </el-col>
        </el-row>
        </div>

        <div v-else-if="this.question.type===3">
<!--          填空题答案部分-->
          <div>填空题答案</div>
          <div v-for="(item,index) in assist_blank" :key="item.id">
                <el-row :gutter="2" justify="center">
                  <el-col :span="6">
                    {{"填空"+(index+1)}}
                  </el-col>
                  <el-col :span="6">
                    <el-input v-model="item.question"></el-input>
                  </el-col>
                  <el-col :span="6">
                    <el-input-number v-model="item.score" :precision="1" :step="0.5" step-strictly :min="0"></el-input-number>
                  </el-col>
                  <el-col :span="2">
                    <el-button circle class="el-icon-circle-plus-outline" type="primary" size="mini" @click="addBlank(index)"></el-button>
                  </el-col>
                  <el-col :span="2">
                    <el-button circle class="el-icon-remove-outline" type="danger" size="mini" @click="deleteBlank(index)"></el-button>
                  </el-col>
                </el-row>
              </div>
          <div v-if="assist_blank.length===0">
            <el-row :gutter="1">
              <el-col :span="2">
                <el-button @click="addBlank(-1)">增加选项</el-button>
              </el-col>
            </el-row>
          </div>
          <!--          填空题分数部分-->

        </div>


        <div v-else-if="this.question.type===4">
<!--          判断题答案-->
          <template>
            <el-radio v-model="assist_judging_answers" :label="true">对</el-radio>
            <el-radio v-model="assist_judging_answers" :label="false">错</el-radio>
          </template>
          <el-input-number v-model="assist_judging_score" :precision="1" :step="0.5" step-strictly :min="0"></el-input-number>

        </div>
        <div v-else-if="this.question.type===5">
          <el-form-item label="简答题答案">
            <el-input
                type="textarea"
                resize="none"
                :autosize="{minRows: 5}"
                v-model="assist_short_answers"
            >
            </el-input>
          </el-form-item>
          <el-input-number v-model="assist_short_score" :precision="1" :step="0.5" step-strictly :min="0"></el-input-number>
        </div>
        <div v-else>空</div>

      </el-form-item>
      <el-form-item label="题目解析">
        <el-input
            resize="none"
            :autosize="{minRows: 5}"
            v-model="question.analysis"
            type="textarea">
        </el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="addQuestion">添加</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "questionAdd",
  props: {},
  computed:{
    choice_body_selection:function(){
      let selections =[];
      this.assist_choice_selections.forEach(item =>{
        selections.push(item.selection);
      })
      return selections;
    },
    choice_body_answers:function(){
      let answers =[];
      this.assist_choice_selections.forEach((item,index) =>{
        if(item.correctness) answers.push(index+1);
      })
      return answers;
    },
    blank_body_answers:function(){
      let answers =[];
      this.assist_choice_selections.forEach((item,index) =>{
        if(item.correctness) answers.push(index+1);
      })
      return answers;
    },
  },
  data() {
    return {
      typeArr: [
        {
          value: 2,
          label: "选择题"
        }, {
          value: 3,
          label: "填空题"
        }, {
          value: 4,
          label: "判断题"
        }, {
          value: 5,
          label: "简答题"
        }],
      question: {
        title: "",
        type: null,
        analysis: "",
        difficulty: 2,
        qt_body: {}
      },
      assist_choice_selections:[],
      assist_choice_score:[5],
      assist_blank:[],
      assist_judging_answers:null,
      assist_judging_score:2,
      assist_short_answers:"",
      assist_short_score:10,
    }
  },
  methods: {
    cancel() {
      this.$emit("cancel");
      this.$emit("input",)
    },
    addQuestion() {
      if(this.question.type === 2)this.question.qt_body ={
        selections:this.choice_body_selection,
        answers:this.choice_body_answers,
        scoreDefault:this.assist_choice_score
      }
      else if(this.question.type === 3)this.question.qt_body={
        answers:this.assist_blank.map((a)=>{return a.question;}),
        scoreDefault:this.assist_blank.map((a)=>{return a.score;})
      }
      else if(this.question.type === 4)this.question.qt_body={
        answers:this.assist_judging_answers,
        scoreDefault:this.assist_judging_score,
      }
      else if(this.question.type === 5)this.question.qt_body={
        answers:this.assist_short_answers,
        scoreDefault:this.assist_short_score,
      }
      // let data = {
      //   title: this.question.title,
      //   type: this.question.type,
      //   analysis: this.question.analysis,
      //   difficulty: this.question.difficulty,
      //   qt_body:this.question.qt_body
      // }
      this.$emit("addQuestion",JSON.parse(JSON.stringify(this.question)))
    },
    changeType(e) {
      if (e === 2) {
        this.question.qt_body = this.qt_choice_body;
      } else if (e === 3) {
        this.question.qt_body = this.qt_blank_body;
      } else if (e === 4) {
        this.question.qt_body = this.qt_judging_body;
      } else if (e === 5) {
        this.question.qt_body = this.qt_shortAnswer_body;
      }
    },
    addSelection(index){
      this.assist_choice_selections.splice(index+1,0,{id:Math.random(),selection:"",correctness:true});
    },
    deleteSelection(index){
      this.assist_choice_selections.splice(index,1);

    },
    addBlank(index){
      this.assist_blank.splice(index+1,0,{id:Math.random(),question:"",score:0});
    },
    deleteBlank(index){
      this.assist_blank.splice(index?index:0,1);
    }
  },
  created() {
  },
}
</script>

<style scoped lang="less">
.container {
  width: 100%;
  .form {

  }
}

</style>